<template>
    <transition appaer name="moveup">
        <div class="tab" v-show="showTab">
            <router-link class="tab-item" tab="div" to="/recommend">
                <div class="icon">
                    <i class="iconfont icon-music"></i>
                </div>
                <span class="text">音乐馆</span>
            </router-link>
            <router-link class="tab-item" tab="div" to="/singer">
                <div class="icon">
                    <i class="iconfont icon-singer"></i>
                </div>
                <span class="text">歌手</span>
            </router-link>
            <router-link class="tab-item" tab="div" to="/rank">
                <div class="icon">
                    <i class="iconfont icon-rank"></i>
                </div>
                <span class="text">排行</span>
            </router-link>
            <router-link class="tab-item" tab="div" to="/mine">
                <div class="icon">
                    <i class="iconfont icon-user"></i>
                </div>
                <span class="text">我的</span>
            </router-link>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    import { mapGetters } from 'vuex'

    export default {
        name: 'tab',
        computed: {
            ...mapGetters([
                'showTab'
            ])
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .moveup-enter-active, .moveup-leave-active
        transition: all $tab-up-time
    .moveup-enter, .moveup-leave-to
        transform: translate3d(0, 100%, 0)

    .tab
        position: fixed
        display: flex
        box-sizing: border-box
        bottom: 0
        left: 0
        right: 0
        height: 54px
        padding: 10px 0
        font-size: $font-size-medium
        box-shadow: 0px 0px 10px $color-text-ld
        border-1px($color-text-ld)
        background: $color-background-w
        .tab-item
            flex: 1
            text-align: center
            &.router-link-active
                color: $color-theme
            .icon
                font-size: 22px
                line-height: 22px
            .text
                display: inline-block
                font-size: $font-size-small-s
</style>